import React from 'react';
import { Checkbox, Space, Typography } from 'antd';
import { Question } from '@/types/question';
import MarkdownEditor from '@/components/MDEditor';
import styles from './Question.module.css';

const { Text } = Typography;

interface MultipleChoiceQuestionProps {
  question: Question;
  readOnly?: boolean;
  value?: string[];
  onChange?: (value: string[]) => void;
}

const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
  question,
  readOnly = true,
  value = [],
  onChange,
}) => {
  const handleOptionClick = (choiceId: string) => {
    if (readOnly) return;
    
    const newValue = value.includes(choiceId)
      ? value.filter(id => id !== choiceId)
      : [...value, choiceId];
    
    onChange?.(newValue);
  };

  return (
    <div className="multiple-choice-question">
      <div className="question-content">
        <MarkdownEditor 
          value={question.content} 
          preview="preview" 
          readOnly 
        />
      </div>
      <div className={styles.optionsContainer}>
        <Checkbox.Group
          value={value}
          onChange={onChange}
          disabled={readOnly}
          className={styles.optionsList}
        >
          {question.choices?.map(choice => (
            <div 
              key={choice.id} 
              className={`${styles.optionItem} ${value.includes(choice.id) ? styles.selected : ''}`}
              onClick={() => handleOptionClick(choice.id)}
            >
              <Checkbox value={choice.id} className={styles.optionCheckbox}>
                <span className={styles.optionContent}>
                  {choice.content}
                </span>
              </Checkbox>
            </div>
          ))}
        </Checkbox.Group>
      </div>
    </div>
  );
};

export default MultipleChoiceQuestion; 